<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="browsermode" content="application" />
	<meta name="x5-page-mode" content="app" />
	<title>下载APP</title>
	<link href="css/main.css?rev=@@hash" rel="stylesheet" />
	<style>
		html {
			font-size: 100px;
			margin: 0;
			padding: 0;
		}
		* {
			margin: 0;
			padding: 0;
		}
		body {
			width: 100%;
		    background: url(images/bg.png) no-repeat center;
		    background-size: 100% 100%;
		}
		a {
			text-decoration: none;
			color: #1B1B1B;
		}
		.headBody {
			width: 100%;
			height: .44rem;
			line-height: .44rem;
			font-size: .17rem;
			color: #1B1B1B;
			background: #fefefe;
		}
		.backIco {
			width: 10%;
			height: .44rem;
			text-align: center;
			display: inline-block;
			float: left;
		}

		.titleTxt {
			display: inline-block;
			width: 80%;
			line-height: .44rem;
			text-align: center;
			float: left;
		}

		#btnImgCode {
			width: .67rem;
			height: .29rem;
			margin-right: .1rem;
		}

		.login_item2 {
			position: relative;
		}

		.login_item2::before {
			content: " ";
			position: absolute;
			left: 0;
			top: 0;
			width: 3.11rem;
			height: 1px;
			border-top: 1px solid #dcdada;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
		}

		.sectionBody {
			width: 100%;
			height: 6rem;
			background: url(images/bg.png) no-repeat center;
			background-size: 100%;
		}

		h1 {
			color: #fff;
			text-align: center;
			padding: .5rem 0 .1rem 0;
		}

		.registLog {
			width: 3.12rem;
			height: 2.55rem;
			margin: 0 auto;
			display: none;
			/*position: fixed;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%,-108%);*/
		}

		.cardInfo {
			width: 3.25rem;
			height: 2.7rem;
			margin: -.2rem auto 0;
			background: url(images/cardInfo.png) no-repeat center;
			background-size: 100% 100%;
			position: relative;
		}

		.cardInfo p:nth-child(1) {
			font-size: .15rem;
			color: #4C4C4C;
			width: 100%;
			text-align: center;
			padding-top: .64rem;
		}

		.cardInfo p:nth-child(1)::after {
			content: " ";
			position: absolute;
			left: .6rem;
			top: 48%;
			width: 60%;
			height: 1px;
			border-top: 6px solid rgba(255, 185, 38, 0.3);
			color: #E4E4E4;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
		}

		.cardInfo p:nth-child(2) {
			font-size: .18rem;
			color: #061830;
			width: 100%;
			text-align: center;
			padding-top: .3rem;
		}

		.cardInfo p:nth-child(2)::after {
			content: " ";
			position: absolute;
			left: 0.7rem;
			top: 53%;
			width: 60%;
			height: 1px;
			border-top: 6px solid rgba(255, 185, 38, 0.3);
			color: #E4E4E4;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
		}
        .cardInfo p:nth-child(3)::after{
		    content: " ";
		    position: absolute;
		    left: 0.3rem;
		    top: 64%;
		    width: 80%;
		    height: 1px;
		    border-top: 6px solid rgba(255, 185, 38, 0.3);
		    color: #E4E4E4;
		    -webkit-transform-origin: 0 0;
		    transform-origin: 0 0;
		    -webkit-transform: scaleY(.5);
		    transform: scaleY(.5);	
        }   
		.btnWrap {
			width: 3.05rem;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
		}

		.btnWrap a {
			width: 1.43rem;
			height: .45rem;
			line-height: .45rem;
			text-align: center;
			font-size: .15rem;
			color: #3276FE;
			background: linear-gradient(top, #C4D3FF, #FFFFFF);
			background: -webkit-linear-gradient(top, #C4D3FF, #FFFFFF);
			border-radius: .25rem;
			margin-top: .34rem;
		}

		.login_item {
			height: .5rem;
			line-height: .5rem;
			align-items: center;
			background: #fff;
		}

		.login_item input {
			width: 100%;
			font-size: .14rem;
		}

		.login_item_bR1 {
			border-radius: .1rem .1rem 0 0;
		}

		.login_item_bR2 {
			border-radius: 0 0 .1rem .1rem;
		}

		.loginicon {
			width: .21rem;
			height: auto;
			margin: .18rem .1rem 0 .1rem;
		}

		.login_btn_code {
			display: block;
			width: .8rem;
			height: .3rem;
			line-height: .3rem;
			font-size: .12rem;
			color: #5c86ff;
			text-align: center;
			border: .01rem solid #5c86ff;
			border-radius: .25rem;
		}

		.loginicon {
			width: .21rem;
			height: auto;
			margin: .18rem .1rem 0 .1rem;
		}

		.login_box {
			padding-top: .2rem;
		}

		#loginBtn {
			position: static;
			width: 3.1rem;
			height: .45rem;
			font-size: .15rem;
			margin: .2rem auto 0;
			text-align: center;
			line-height: .45rem;
			color: #3276fe;
			background: #d6e1ff;
			border-radius: .25rem;
			box-shadow: 0 0 0 #fff;
		}
        .log img{
		    display: block;
		    width: .9rem;
		    margin: 0 auto;
        }
		.showImg {
			display: none;
			padding:  .1rem .5rem;
			width: 60%;
			margin: 0 auto;
			transform: translate(0, -123%);
		}

		.showImg img {
			width: 100%;
		}

		.showAnim {
			padding-top: 1rem;
		}

		.fadeUp {
			animation: fadeUp 1s ease-in-out forwards;
		}

        @keyframes fadeUp{
        	from{transform: translate(0,100px) scale(1);opacity: 0;}
        	to{transform: translate(0,-340px) scale(1);opacity: 1;}
        }   

		.fadeUpSlid {
			animation: fadeUpSlid 1s ease-in-out forwards;
		}

        @keyframes fadeUpSlid{
        	from{transform: translate(0,0) scale(1);opacity: 1;}
        	to{transform: translate(0,-700px) scale(0);opacity: 0;}
        }   
	</style>
</head>

<body>
	<header class="headBody">
		<a href="#" class="backIco"></a>
		<span class="titleTxt">下载APP</span>
	</header>
	<section class="sectionBody">
		<div class="showAnim">
			<div class="cardInfo">
				<p>欢迎使用悟空招财</p>
				<p>马上安装悟空招财app领钱吧</p>
			</div>
			<div class="btnWrap">
				<a class="uplaodBtn" >苹果下载</a>
				<a class="uplaodBtn" >安卓下载</a>
			</div>
		</div>
		<div class="registLog">
			<div class="login_box">
				<h1>请先注册</h1>
				<div class="flex login_item login_item_bR1">
					<div>
						<img class="loginicon" src="img/login_user.png">
					</div>
					<div class="cell_cn">
						<input type="tel" name="" id="txtMobile" placeholder="请输入您的手机号" maxlength="11">
					</div>
				</div>
				<div class="flex login_item login_item2">
					<div>
						<img class="loginicon" src="img/login_imgcode.png">
					</div>
					<input type="text" placeholder="请输入图形验证码" maxlength="6" id="txtImgCode" />
					<input type="hidden" id="hdImgCodeID" value="" />
					<div class="cell_ft">
						<img src=""
						 id="btnImgCode" />
					</div>
				</div>
				<div class="flex login_item login_item2 login_item_bR2">
					<div>
						<img class="loginicon" src="img/login_code.png">
					</div>
					<div class="cell_cn">
						<input type="tel" placeholder="短信验证码" id="txtCode" maxlength="6" />
					</div>
					<div class="cell_ft">
						<a href="javascript:;" class="login_btn_code" id="btnCode">获取验证码</a>
					</div>
				</div>
			</div>
			<div id="loginBtn">注册</div>
		</div>
		<div class="showImg">
			<img src="img/registe.png" />
		</div>
	</section>
</body>
<script src="./lib/zepto.min.js?rev=@@hash"></script>
<script src="./js/main.js?rev=@@hash"></script>
<script>
	! function (global, userUtil, layer, dataUtil) {
		$("body").height(document.documentElement.clientHeight)
		function changeImgCode() {
			if ($("#btnImgCode").hasClass("dis")) {
				return;
			}
			$("#btnImgCode").addClass("dis");
			userUtil.ajax({
				url: global.localUrl + "wallet/user/randomImage",
				//   data: {
				//       //ss: new Date().getMilliseconds()
				//   },
				done: function (re) {
					$("#btnImgCode").removeClass("dis");
					if (1 == re.code) {
						$("#hdImgCodeID").val(re.data.imgSessionId);
						$("#btnImgCode").attr("src", "data:image/jpeg;base64," + re.data.imgBase64);
					}
				}
			});
		}
		$("#btnImgCode").on("click", function () {
			changeImgCode();
		});
		function showWaitTips() {
			var $btnCode = $("#btnCode");
			var s = 60;
			$btnCode.text("已发送(" + s + ")").addClass("dis");
			var sv = setInterval(function () {
				if (s > 1) {
					s--;
					$btnCode.text("已发送(" + s + ")");
				} else {
					$btnCode.text("重新获取").removeClass("dis");
					clearInterval(sv);
				}
			}, 1000);
		}
		//  短信验证码
		$("#btnCode").on("click", function () {
			var $this = $(this);
			if (!$this.hasClass("dis") && validateMobile() && validateImgCode()) {
				$this.addClass("dis");
				var _model = getModel();
				var _data = {
					mobileNumber: _model.mobileNumber,
					inCode: _model.inCode,
					imgSessionId: _model.imgSessionId,
					smsType: "LOGIN",
					//ss: new Date().getMilliseconds()
				};

				$.ajax({
					url: global.localUrl + "wallet/system/smsCode",
					type: "post",
					data: JSON.stringify(_data),
					contentType: 'application/json;charset=utf-8',
					success: function (re) {
						if (1 == re.code) {
							showWaitTips();
						} else if (1033 == re.code) {
							changeImgCode();
							$("#txtImgCode").val("");
							$this.removeClass("dis");
							layer.tips("系统繁忙，请稍后再试");
						} else {
							changeImgCode();
							$("#txtImgCode").val("");
							$this.removeClass("dis");
							layer.tips(re.message);
						}
					},
					error: function () {
						$this.removeClass("dis");
						layer.tips(global.netError);
					}
				});
			}
		});
		changeImgCode();
		$('#loginBtn').on('click', function () {
			var $this = $(this);
			if (!$this.hasClass("dis") && validateMobile() && validateImgCode() && validateCode()) {
				$this.addClass("dis");
				var _model = getModel();
				var _data = {
					mobileNumber: _model.mobileNumber,
					smsCode: _model.smsCode,
					channel: 53
				};
				$('.layer_mask').addClass('on');
				$.ajax({
					url: global.localUrl + "wallet/user/qdlogup",
					type: "post",
					data: JSON.stringify(_data),
					contentType: 'application/json;charset=utf-8',
					success: function (re) {
						$('.layer_mask').removeClass('on');
						if (1 == re.code) {
							localStorage.setItem("flagres", re.code);
							layer.tips('注册成功');
							$('.registLog').addClass('fadeUpSlid');
							$('.showAnim').css('opacity', '1');
							$('.showImg').css('display', 'block');
						} else {
							changeImgCode();
							$("#txtImgCode").val("");
							$("#txtCode").val("");
							$this.removeClass("dis");
							layer.tips(re.message);
						}
					},
					error: function () {
						$('.layer_mask').removeClass('on');
						$this.removeClass("dis");
						layer.tips(global.netError);
					}
				});
			}
		})
		var u = navigator.userAgent;
		var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端	        
		$('.uplaodBtn').on('click', function () {
			var index = $('.uplaodBtn').index();
			if (localStorage.getItem("flagres") == 1) {
				if (ios && index == 0) {
					$('.uplaodBtn').eq(0).attr("href", "itms-services://?action=download-manifest&url=https://image.pushunjinfuchina.com/ioszhaocai/manifest.plist");
				} else {
					$('.uplaodBtn').eq(1).attr("href", "https://image.pushunjinfuchina.com/android/Wkzhaocai.apk");
				}
			} else {
				$('.registLog').css('display', 'block').addClass('fadeUp');
				$('.showAnim').css('opacity', '0');
			}
		})
		function getModel() {
			return {
				mobileNumber: $.trim($("#txtMobile").val()),
				inCode: $.trim($("#txtImgCode").val()),
				imgSessionId: $.trim($("#hdImgCodeID").val()),
				smsCode: $.trim($("#txtCode").val()),
				code: $.trim($("#txtCode").val()),
			}
		}
		function validateMobile() {
			var _model = getModel();
			if (!dataUtil.isMobile(_model.mobileNumber)) {
				layer.tips("请输入正确的手机号");
				return false;
			}
			return true;
		}
		function validateCode() {
			var _model = getModel();
			if (!_model.code) {
				layer.tips("请输入短信验证码");
				return false;
			}
			return true;
		}
		function validateImgCode() {
			var _model = getModel();
			if (!_model.imgSessionId) {
				layer.tips("请刷新图形验证码");
				return false;
			} else if (!_model.inCode) {
				layer.tips("请输入图形验证码");
				return false;
			}
			return true;
		}
	}(global, userUtil, layer, dataUtil);	
</script>

</html>